<template>
	<view class="record">
		<u-navbar title="流水记录" :border-bottom="false"></u-navbar>
		<!-- <view class="time">
			<view class="t">
				<view
					class="t_i"
					@click="
						rotation1++;
						show1 = !show1;
						show2 = false;
					"
				>
					日期
					<img src="../../static/xia.png" :style="'transform:rotate(' + rotation1 * 180 + 'deg)'" alt="" class="icon" />
				</view>
				<view
					class="t_i"
					@click="
						rotation2++;
						show2 = !show2;
						show1 = false;
					"
				>
					已供货服务站
					<img src="../../static/xia.png" :style="'transform:rotate(' + rotation2 * 180 + 'deg)'" alt="" class="icon" />
				</view>
			</view>
		</view> -->
		<scroll-view class="msg" scroll-y="true" @scrolltolower="lower">
			<view v-for="(item, index) in flowList" :key="index" class="i">
				<view class="t">
					<view>{{ item.tran_title }}</view>
					<view>{{ item.change === 1 ? '+' : '-' }}{{ Number(item.money) }}</view>
				</view>
				<view class="b">
					<view>{{ item.create_time }}</view>
					<view style="color: red">{{ item.is_tk === 1 ? '已退款' : '' }}</view>
				</view>
			</view>
			<view style="padding: 20rpx 0rpx; box-sizing: border-box">
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
			</view>
		</scroll-view>
		<u-select v-model="show1" :list="list1"></u-select>
		<u-select v-model="show2" :list="list2"></u-select>
	</view>
</template>

<script>
import { logwalletlist } from '../../libs/axios.js';
export default {
	data() {
		return {
			rotation1: 0,
			rotation2: 0,
			show1: false,
			show2: false,
			list1: [
				{
					value: '1',
					label: '江'
				},
				{
					value: '2',
					label: '湖'
				}
			],
			list2: [
				{
					value: '1',
					label: '江1'
				},
				{
					value: '2',
					label: '湖2'
				}
			],
			loadStatus: 'loadmore',
			page_num: 1,
			flowList: []
		};
	},
	onLoad() {
		this.lower();
	},
	methods: {
		async lower() {
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			if (this.current === 0) {
				console.log(1);
			}
			let info = await logwalletlist({
				pageIndex: this.page_num,
				pageSize: 10
			});
			info.data.list.forEach((item) => {
				item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss');
				this.flowList.push(item);
			});
			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		}
	}
};
</script>

<style lang="scss">
.record {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.time {
		position: relative;
		background: #fff;
		.t {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.t_i {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.icon {
				width: 20rpx;
				height: 12rpx;
				margin-left: 10rpx;
				transition-duration: 5;
			}
		}
	}
	.msg {
		height: 80vh;
		overflow: scroll;
		.i {
			padding: 26rpx 36rpx;
			.t {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.b {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-top: 20rpx;
			}
		}
	}
}
</style>
